<template>
  <BorderBox10 class="w-full h-full">
    <Title
      class="pt-4"
      :title="`完成方案进度`"
    />

    <div class="w-full h-4/5 mt-6 flex flex-col items-center gap-4">
      <div class="w-full px-4 box-border h-1/2">
        <lineChart
          v-if="isShowLine"
          :data="plan_histogram"
        />
      </div>
      <div class="w-full box-border">
        <div class="w-full h-full py-4 px-12 box-border">
          <div class="w-full flex h-1/6 flex-row justify-between">
            <p class="text-[#00FFFF]">用户名</p>
            <p class="text-[#00FFFF]">完成进度</p>
          </div>
          <div
            @mousemove="testMove"
            @mouseleave="testMend"
          >
            <div
              ref="roll"
              class="w-full max-h-52 overflow-y-hidden"
            >
              <div
                v-for="(item, index) in plan_rank"
                :key="index"
                class="lists w-full text-slate-300 flex h-full leading-8 flex-row text-left justify-between"
              >
                <p>{{ item.username }}</p>
                <p>{{ item.count }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BorderBox10>
</template>

<script setup>
import lineChart from '@/view/memberManager/components/lineChart.vue'
import { ref, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
import { BorderBox10, Decoration8 } from '@kjgl77/datav-vue3'
import Title from '@/view/memberManager/components/title.vue'

const props = defineProps({
  plan_rank: {
    type: Object,
    default: () => {}
  },
  plan_histogram: {
    type: Array,
    default: () => []
  },
  isShowLine: {
    type: Boolean,
    default: false
  },
})
// ref绑定初始化
const roll = ref(null)
// 定时器初始化
const timer = ref(null)

const testMove = () => {
  clearTimeout(timer.value)
}
const testMend = () => {
  start()
}

onBeforeUnmount(() => {
  // 清除定时器
  clearTimeout(timer.value)
})
onUnmounted(() => {
  // 清除定时器
  clearTimeout(timer.value)
})

const start = () => {
  // 清除定时器
  clearTimeout(timer.value)
  // 定时器触发周期
  const speed = ref(75)
  timer.value = setInterval(MarqueeTest, speed.value)
}
function MarqueeTest() {
  let test1 = roll.value
  // 判断组件是否渲染完成
  if (test1.offsetHeight == 0) {
    test1 = roll.value
  } else {
    // 如果列表数量过少不进行滚动
    if (test1.childNodes.length < 6) {
      clearTimeout(timer.value)
      return
    }
    // 组件进行滚动
    test1.scrollTop += 1
    // 判断滚动条是否滚动到底部
    if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
      // 获取组件第一个节点
      const a = test1.childNodes[0]
      // 删除节点
      test1.removeChild(a)
      // 将该节点拼接到组件最后
      test1.append(a)
    }
  }
}

// 启动定时器
start()

nextTick(() => {
  start()
})

</script>

<style scoped>
.lists {
  border-bottom: 1px solid #53749C;
}

@keyframes scroll {
  0%{
    transform: translateY(0);
  }
  100% {
    transform: translateY(-175%);
  }
}
</style>
